<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>


<div id="app">
    <el-button @click="exportSalary">导出工资条</el-button>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="name"
                label="姓名">
        </el-table-column>
        <el-table-column
                prop="worknum"
                label="工号">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="deptNames"
                label="部门名称">
        </el-table-column>
        <el-table-column
                label="薪资结构">

            <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" placement="left">
                    <div slot="content">
                        基本工资：{{scope.row.salaryConstructor.jibengongzi}}<br>
                        交通补助：{{scope.row.salaryConstructor.jiaotongbuzhu}}<br>
                        午餐补助：{{scope.row.salaryConstructor.wucanbuzhu}}<br>
                        奖金：{{scope.row.salaryConstructor.jiangjin}}<br>
                        养老金比例：{{scope.row.salaryConstructor.yanglaojinbili}}<br>
                        养老金基数：{{scope.row.salaryConstructor.yanglaojinjishu}}<br>
                        医疗保险比例：{{scope.row.salaryConstructor.yiliaobaoxianbili}}<br>
                        医疗保险基数：{{scope.row.salaryConstructor.yiliaobaoxianjishu}}<br>
                        公积金比例：{{scope.row.salaryConstructor.gongjijinbili}}<br>
                        公积金基数：{{scope.row.salaryConstructor.gongjijinjishu}}<br>
                    </div>
                    <el-tag>{{scope.row.salaryConstructor.name}}</el-tag>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            total:0,
            query:{
                page:1,
                pageSize:2
            }

        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }
            }
        },
        methods:{
            exportSalary(){
                location.href = "/emp/exportSalary"
            },
            handleSizeChange(val) {
                this.query.pageSize = val;
            },
            handleCurrentChange(val) {
                this.query.page = val;
            },
            initData(){
                axios.post(`/emp/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })

            }

        },
        created(){
            this.initData()
        }
    })
</script>

</body>
</html>
